<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
    <div id="box">
      <!-- <div v-hello="'red'">111111</div>
      <div v-hello="'yellow'">2222222</div> -->
      <div v-hello="mycolor">3333333</div>
    </div>	

    <script type="text/javascript">
      // v-if="isShow" v-for v-model v....
      // v-steve v-swipe  操作底层dom
      
      Vue.directive("hello",{

        inserted(el,bind){
          // 指令-生命周期-创建
          //插入 
          console.log("v-hello指令被插入div了，值为",bind.value)
          // console.log(bind.value);
          el.style.background=bind.value
        },

        update(el,bind){
          console.log("v-hello指令的值被更新登录，新值为",bind.value)
          // 指令-生命周期-更新
          // el.style.background=bind.value
          el.style.color=bind.value
        }

      })

      var vm = new Vue({
        el:"#box",
        data:{
          mycolor:"red"
        }
      })
       
    </script>
</body>
</html>